<template>
	<view class="index">
		<view class="index-banner">
			<image src="../../static/images/1.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/2.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/3.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/4.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/5.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/6.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/7.jpg" mode="widthFix"></image>
		</view>
		<view class="index-banner">
			<image src="../../static/images/8.jpg" mode="widthFix"></image>
		</view>
		<view style="height: 340rpx;"></view>
		<view class="index-position">
			<view>
				<button type="default" size="mini" @tap="toServer(1)">计算报价</button>
		
				<view class="index__dot">1</view>
			</view>
			<view>
				<button type="default" size="mini" @tap="toServer(1)">最新优惠</button>
			</view>
			<view>
				<button type="default" size="mini" @tap="toServer(1)">实景体验</button>
			</view>
		</view>
		<!-- <view class="index-footer">
			<view style="font-weight: bold;font-size: 30rpx;">
				<image src="../../static/server.png" mode=""></image>仅限上海近3个月有装修需求业主
			</view>
			<view>
				<view>
					<button type="default" size="mini" @tap="toServer(1)">在线咨询</button>
					<view class="index__dot">1</view>
				</view>
			</view>
		</view> -->
		<view class="index-footernew">
			<view class="item-line">
				<view>您的房屋面积:</view>
				<text v-for="(item,index) in fwmj" :key="index" @tap="checkmj(index)" :class="item.check?'checkc':''">{{item.text}}</text>
			</view>
			<view class="item-line">
				<view>预计装修时间:</view>
				<text v-for="(item,index) in zxsj" :key="index" @tap="checksj(index)" :class="item.check?'checkc':''">{{item.text}}</text>
			</view>
			<view class="item-line">
				<button type="default" class="login_btn" @tap="toServer(1)" v-if="isShouquan">报名免费领取全屋装修设计/实景案例</button>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!isShouquan && ischeckbtn">报名免费领取全屋装修设计/实景案例</button>
				<button type="default" class="login_btn" hover-class="none" @tap="nocheck()" v-if="!isShouquan && !ischeckbtn">报名免费领取全屋装修设计/实景案例</button>
			</view>
		</view>
		<!-- 拒绝弹框 -->
		<view class="refuse-remark" v-if="isrefuse">
			<view class="box">
				<view class="tit">价值41000元装修礼包</view>
				<view>1、免全屋装修设计费</view>
				<view>2、免施工管理费</view>
				<view>3、免开荒保洁费</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键抢占优惠名额</button>
			    <image src="../../static/close.png" class="close" @tap="close"></image>
			</view>
		</view>
	</view>
</template>
<!-- <script module="vconsole" lang="renderjs">  
    import VConsole from 'utils/vconsole.min.js'  
    new VConsole();  
</script> -->
<script>
	export default {
		data:() => ({
			userInfo:'',
			isShouquan:false,
			click_id :'',
			weixinadinfo:'',
			weixinadkey:'',
			status: 2 ,   //status ==1  已授权过手机号   status == 2 第一次授权手机号
			fwmj:[
				{text:'50㎡-80㎡',check:false},
				{text:'80㎡-120㎡',check:false},
				{text:'120㎡以上',check:false}
			],
			zxsj:[
				{text:'3个月内',check:false},
				{text:'3-6个月',check:false},
				{text:'6个月以后',check:false}
			],
			ischeckbtn:false,
			isrefuse:false
		}),
		onShow(){
			let that = this;
			that.loginCodeSession();
			
		},
		onLoad(e){
			  console.log(e,'indexe')
			  if(e.gdt_vid ){
				  this.click_id  = e.gdt_vid;
			  }else if(e.qz_gdt){
				  this.click_id  = e.qz_gdt;
			  }
			  if(e.weixinadinfo){
				  this.weixinadinfo = e.weixinadinfo
			  }
			  if(e.weixinadkey){
				  this.weixinadkey = e.weixinadkey
			  }
			  
			  // 绑定分享参数
			   wx.onCopyUrl(() => {
			     return {  }
			   })
		},
		onUnload(){
			wx.offCopyUrl()
			
		},
		watch:{
		    fwmj: {
						handler(newVal, oldVal) {
							let result = newVal.some(item=>{
								if(item.check == true){
									return true
								}
							})
							let result1 = this.zxsj.some(item=>{
								if(item.check == true){
									return true
								}
							})
							if(result && result1){
								this.ischeckbtn = true;
							}else{
								this.ischeckbtn = false
							}
						   },
						 immediate: false,
						 deep: true,//监听对象
		    },
					 zxsj: {
						handler(newVal, oldVal) {
						   let result = newVal.some(item=>{
						   	if(item.check == true){
						   		return true
						   	}
						   })
						   let result1 = this.fwmj.some(item=>{
						   	if(item.check == true){
						   		return true
						   	}
						   })
						   if(result && result1){
						   	this.ischeckbtn = true;
						   }else{
						   	this.ischeckbtn = false
						   }
						   },
						 immediate: false,
						 deep: true,//监听对象
					 }
		 },
		methods:{
			nocheck(){
				if(this.checkBtn()){
					this.ischeckbtn = true
				}else{
					this.ischeckbtn = false
				}
			},
			close(){
				this.isrefuse = false
			},
			checkmj(index){
				this.fwmj.forEach(item=>{
					item.check = false
				})
				this.fwmj[index].check = true
			},
			checksj(index){
				this.zxsj.forEach(item=>{
					item.check = false
				})
				this.zxsj[index].check = true
			},
			getPhoneNumber(e) {
				let that = this;
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
			        let param = {
			        	encryptedData:e.detail.encryptedData,
			        	iv:e.detail.iv,
			        	session_key:uni.getStorageSync('wxSessionkey'),
						openid:uni.getStorageSync('openid'),
			        	flag:2
			        }
			        uni.request({
			        	url: 'https://xcx.mingjugroup.net/index/getInfo',
			        	method: 'POST',
			        	header: { 
			        		'content-type': 'application/x-www-form-urlencoded',
			        		'Access-Control-Allow-Origin': '*'
			        	},
			        	data: param,
			        	success: res => {
							 
							if(res.data.errcode == 0){
								 that.status = 1;
								 that.showGetuserinfo = false;
								 uni.setStorageSync('phoneNumber', res.data.data.phoneNumber);
								 if(that.click_id){
									 that.getaccessToken()
								 }else{
									 that.toServer(2)
								 }
								
							}else{
								uni.showToast({
								    title: res.data.errmsg,
								    duration: 2000
								});
							}
			        	},
			        	fail: (err) => {
							uni.showToast({
							    title: '获取失败，请稍后重试',
							    duration: 2000
							});
			        	}
			        })
				} else {
					this.isrefuse = true
					let param = {openid:uni.getStorageSync('openid')}
			          uni.request({
			          	url: 'https://xcx.mingjugroup.net/index/deny',
			          	method: 'POST',
			          	header: {
			          		'content-type': 'application/x-www-form-urlencoded',
			          		'Access-Control-Allow-Origin': '*'
			          	},
			          	data: param,
			          	success: res => {
			          		if(res.data.errcode == 0){
							}
			          	},
			          	fail: (err) => {
			          		
			          	}
			          })
				}
			},
			getaccessToken(){
				uni.request({
					url: 'https://xcx.mingjugroup.net/index/getAccessToken',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Access-Control-Allow-Origin': '*'
					},
					data: {flag:2},
					success: res => {
						if(res.data.errcode == 0){
							this.access_token = res.data.data.access_token;
								this.advhc();
							
						}else{
							uni.showToast({
							    title: res.data.errmsg,
							    duration: 2000
							});
						}
						
						console.log(res,'access_token')
						
					},
					fail: (err) => {
						uni.showToast({
						    title: '获取accesstoken失败，请稍后重试',
						    duration: 2000
						});
					}
				})
			},
			// 回传
			advhc(){
				let that = this;
				uni.request({
					url: `https://xcx.mingjugroup.net/index/uploadReservation?access_token=${that.access_token}`,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Access-Control-Allow-Origin': '*'
					},
					data: {flag:2,click_id:that.click_id,weixinadinfo:that.weixinadinfo,weixinadkey:that.weixinadkey},
					success: res => {
						that.status = 1
						that.toServer(2)
						console.log(res,'huichuan')
					},
					fail: (err) => {
						uni.showToast({
						    title: '回传失败',
						    duration: 2000
						});
					}
				})
			},
			
			
			getinfo(cb){
				uni.request({
					url: 'https://xcx.mingjugroup.net/index/getUser',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Access-Control-Allow-Origin': '*'
					},
					data: {openid:uni.getStorageSync('openid'),flag:2},
					success: res => {	
						if(res.data.errcode == 0){
							console.log(res)
							if(res.data.data.mobile){
								console.log(1111)
								   //已有手机号
								   this.isShouquan = true
								   this.status = 1
							}else{
								this.isShouquan = false
								this.status = 2
							}
							
							// cb(res)
						}else{
							uni.showToast({
							    title: res.data.errmsg,
							    duration: 2000
							});
						}
						
						
					},
					fail: (err) => {
						uni.showToast({
						    title: '授权失败，请稍后重试',
						    duration: 2000
						});
					}
				})
			},
		 //    getUserProfile(event){
			// 	let that = this;
			// 	uni.getUserProfile({
			// 		desc: '获取用户信息授权',
			// 		lang: 'zh_CN',
			// 		success: function(res) {
			// 			if(res.errMsg != "getUserProfile:ok") {
			// 			    uni.showToast('授权失败，请稍后重试');
			// 			    return false;
			// 			}
			// 			that.userInfo = res.userInfo;
						
			// 			uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
			// 			that.loginCodeSession()
			// 		},
			// 		fail:(error) => {
						
			// 		}
			// 	});
			// },
			loginCodeSession(){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						let params = {
							code:loginRes.code,
							userInfo:JSON.stringify(that.userInfo),
							flag:2
						}
						uni.request({
							url: 'https://xcx.mingjugroup.net/index/getSession',
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'Access-Control-Allow-Origin': '*'
							},
							data: params,
							success: res => {
								// if(res.errcode == 0){
									uni.setStorageSync('wxSessionkey', res.data.session_key);
									uni.setStorageSync('openid',res.data.openid)
									that.getinfo()
									// that.getinfo(getRes => {
									// 	// that.toServer();
									// });
								// }else{
								// 	uni.showToast({
								// 	    title: res.errmsg,
								// 	    duration: 2000
								// 	});
								// }
								
							},
							fail: (err) => {
								uni.showToast({
								    title: '授权失败，请稍后重试',
								    duration: 2000
								});
							}
						})
					},
					fail:(error) => {
						// console.log(error)
					}
				});
			},
		    checkBtn(){
		    	let result = this.fwmj.some(item=>{
		    		if(item.check == true){
		    			return true
		    		}
		    	})
		    	let result1 = this.zxsj.some(item=>{
		    		if(item.check == true){
		    			return true
		    		}
		    	})
		    	
		    	if(!result){
		    		uni.showToast({
		    		    title: '请选择您家的面积',
		    			icon:'none',
		    		    duration: 2000
		    		});
		    		return false
		    	}
		    	if(!result1){
		    		uni.showToast({
		    		    title: '请选择装修时间',
		    			icon:'none',
		    		    duration: 2000
		    		});
		    		return false
		    	}
		    	
		    	return true
		    },
			toServer(){
				// uni.navigateTo({url: '/pages/index/server?type='+type});
				uni.navigateTo({url: '/pages/index/server?click_id='+this.click_id+'&weixinadinfo='+this.weixinadinfo+'&weixinadkey='+this.weixinadkey+'&type='+this.status});
			}
		}
	}
</script>
<style lang="scss">
	@keyframes shake_f1fde{
		0%,35%{
			transform:rotate(0deg)
		}
		5%,15%,25%{
			transform:rotate(-3deg)
		}
		10%,20%,30%{
			transform:rotate(3deg)
		}
	}
	// 点击时样式
	.button-hover {
		color:rgba(0, 0, 0, 0.6);
		background-color:#fff;
	}
	.checkc{
		background-color: #f85959;
		color: #fff;
	}
	.refuse-remark{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.4);
		.box{
			background: #fff;
			width: 80%;
			height: 500rpx;
			padding: 40rpx;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			margin-left: -40%;
			top: 50%;
			margin-top: -250rpx;
			border-radius: 10rpx;
			.close{
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				right: -58rpx;
				top: -58rpx;
			}
			.tit{
				font-size: 34rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 20rpx;
				width: 100%;
			}
			>view{
				line-height: 50rpx;
				font-size: 30rpx;
				width: 60%;
				margin: 0 auto;
				padding: 8rpx 0;
			}
			>button{
				color: white;
				font-size: 26rpx;
				background-color: #f85959;
				width: 100%;
				padding: 5px 0;
				margin-top: 40rpx;
			}
		}
		
	}
	.index{
		font-size: 26rpx;
		&__dot{
			background-color: #ff3434;
			padding: 0rpx 14rpx;
			border-radius: 50%;
			position: absolute;
			right: -12rpx;
			top: -12rpx;
			color: white;
			font-size: 32rpx;
		}
		&-position{
			position: fixed;
			transform: translateY(-50%);
			top: 50%;
			right: 30rpx;
			button{
				color: white;
				font-size: 32rpx;
				font-weight: bold;
				background-color: rgb(67, 67, 67);
				margin-bottom: 20rpx;
			}
			>view{
				position: relative;
			}
			>view:first-child{
				animation: shake_f1fde 2.5s infinite;
			}
		}
		&-swiper{
			height: 500rpx;
			&__item{
				height: 500rpx;
				width: 100%;
				>image{
					width: 100%;
					height: 100%;
				}
			}
		}
		&-banner{
			width: 100%;
			margin-top: -10rpx;
			>image{
				width: 100%;
			}
		}
		&-footernew{
			box-sizing: border-box;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0 0 5px #ccc;
			color: #333;
			padding:0 30rpx;
			>view{
				border-bottom: 1px solid #dedbdb;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;
				font-size: 28rpx;
				>text{
					width: 155rpx;
					border: 1px solid #ccc;
					border-radius: 10rpx;
					display: inline-block;
					padding: 10rpx 0;
					text-align: center;
				}
				>button{
					color: white;
					font-size: 30rpx;
					background-color: #f85959;
					width: 100%;
					padding: 5px 0;
					outline: none;
				}
			}
		}
		&-footer{
			box-sizing: border-box;
			height: 110rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: rgb(32, 30, 30);
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: white;
			padding: 0 30rpx;
			>view{
				display: flex;
				align-items: center;
				>view{
					display: flex;
					align-items: center;
					position: relative;
					animation: shake_f1fde 2.5s infinite;
					>button{
						color: white;
						font-size: 26rpx;
						background-color: rgb(248, 89, 89);
					}
				}
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>


